<template>
  <div class="">
<div>
  <enterprise-factory></enterprise-factory>
</div>
  <q-stepper
    v-model="step"
    ref="stepper"
    color="primary"
    style="max-height: 50vh; box-shadow: none; background-color: #eeeeee"
    class="stepperOne"
    animated>
      <q-step
        v-for="(item, index) in dataArr"
        :key="index"
        :name="item.step"
        :title="item.label"
        icon="create_new_folder"
        :done="step >= item.step"
      >
<!--        :tabs=item.tabs-->
        <Component :is="item.name" :data="item.data" ref="component" :category="item.category"  @linkData="linkData"
                    style="height: 100%">
<!--          <template v-if="step!==1" #header-right>-->
<!--            <div>-->
<!--              <q-btn color="cyan" @click="addData">增加数据</q-btn>-->
<!--            </div>-->
<!--          </template>-->
          <template #map>
            <div style="width: 5rem;height: 5rem;overflow: hidden;">
              <map-component></map-component>
            </div>
          </template>
          <template v-if="item.category==='table'" #operate>
            <div class="q-gutter-md">
<!--              <q-btn color="positive">厂区管理</q-btn>-->
              <q-btn color="negative" @click="deleteLine">删除</q-btn>
            </div>
          </template>
<!--          <template #header-center>-->
<!--            <div class="text-h4 text-positive">{{item.label}}</div>-->
<!--          </template>-->
        </Component>
        <div class="row justify-end q-gutter-md absolute-bottom-right q-mx-md">
          <q-btn color="primary" v-if="step!==1" @click="returnLast" label="返回"></q-btn>
          <q-btn color="primary" @click="nextStep" label="下一步"></q-btn>
          <q-btn color="positive" v-if="step===dataArr.length" label="提交"></q-btn>
        </div>
<!--        <input-component  :data="item.data" :category="'list'">-->
<!--          <template #footer-right>-->
<!--            <div>-->
<!--              <q-btn color="primary">下一步</q-btn>-->
<!--            </div>-->
<!--          </template>-->
<!--        </input-component>-->
      </q-step>
  </q-stepper>
  </div>
</template>

<script>
/* 环境评价 */
// eslint-disable-next-line
import { defineComponent, onMounted, ref,toRef } from 'vue'
import InputComponent from 'components/commonComponent/InputComponent'
import EnterpriseFactory from 'components/commonComponent/EnterpriseFactorySelect'
import Stepper from 'components/commonComponent/Stepper'
import dataList from 'pages/data-import/evaluation/defaultData'
import MapComponent from 'components/commonComponent/MapComponent'
export default defineComponent({
  name: 'Index',
  components: { MapComponent, InputComponent, Stepper, EnterpriseFactory },
  setup () {
    const step = ref(1)
    const getData = () => {
    }
    const submitCurr = (data) => {
      console.log(data)
    }
    const dataArr = ref(dataList)
    const returnLast = () => {
      if (step.value !== 1 && step.value < dataArr.value.length) {
        step.value = step.value - 1
        console.log(step.value)
      }
    }
    const linkData = function (obj) {
      console.log(obj)
      // eslint-disable-next-line
      const { index, label, linkProp, currVal } = obj
      const currSheet = dataArr.value[index]
      const linkData = currSheet.linkData
      console.log(linkData)
      currSheet.data.forEach(item => {
        if (item.label === label) {
          console.log(linkData[linkProp])
          if (linkData[linkProp].tag === 'input') {
            item.show = true
            item.value = currVal
          } else if (linkData[linkProp].tag === 'select') {
            item.show = true
            item.options = linkData[linkProp].options
          } else if (linkData[linkProp].tag === 'toggle') {
            console.log('aaa')
            if (!linkData[linkProp].firstPollution.indexOf(currVal)) {
              item.show = true
              item.toggle = true
            } else {
              item.show = true
              item.toggle = false
            }
          } else {
            console.log('err')
          }
        }
      })
      // console.log(dataArr.value[index])
    }
    const addData = function () {

    }
    const nextStep = function () {
      if (step.value < dataArr.value.length) {
        step.value = step.value + 1
        console.log(step.value)
      }
    }
    onMounted(() => {
    })
    return {
      addData,
      nextStep,
      returnLast,
      getData,
      dataArr,
      step,
      submitCurr,
      linkData
      // deleteLine
    }
  },
  methods: {
    deleteLine () {
      console.log('aaa')
    }
  }
})
</script>
<style scoped>
.lucky-sheet-container {
  width: 100%;
  height: 100%;
}
</style>
